<script src="../node_modules/vue/dist/vue.js"></script>

<div id="app"></div>

<script>
  function createApp({ el, model, view, actions }) {
    for (let key in actions) {
      const oldAction = actions[key];
      actions[key] = (...args) => {
        app.state = { ...app.state, ...oldAction(app.state, ...args) }
      }
    }
    const app = new Vue({
      el,
      data: { state: model },
      render(h) {
        return view(h, this.state, actions)
      }
    })
  }

  // voila
  createApp({
    el: '#app',
    model: {
      count: 0
    },
    actions: {
      inc: ({ count }) => ({ count: count + 1 }),
      dec: ({ count }) => ({ count: count - 1 })
    },
    view: (h, model, actions) => h('div', { attrs: { id: 'app' } }, [
      model.count, ' ',
      h('button', { on: { click: actions.inc } }, '+'),
      h('button', { on: { click: actions.dec } }, '-')
    ])
  })

</script>